<script setup lang="ts">
import { traduction } from '@/utils/language';
import { ref, reactive, toRefs, onMounted, computed } from 'vue';
import DataList from '@/components/DataList/DataList.vue';
import { getStoreData } from '@/utils/composition';

const multihost = computed(() => getStoreData('loct', 'multihost'));
const props = defineProps({
  data: {
    required: true,
    type: Object,
    default: () => {
      return {};
    },
  },
  support: {
    type: Boolean,
  },
});
const { data } = toRefs(props);
let infoData = data?.value;
let powerState = ref('POWER_NOT_DETECTED');
let tagType = ref('success');

const absent = infoData.State === 'Absent';

function getPowerType(activeStandby: string) {
  let type = null;
  tagType.value = 'success';
  if (activeStandby === 'Active') {
    type = 'POWER_MAIN';
  } else if (activeStandby === 'Standby') {
    type = 'POWER_STANDBY';
  } else if (activeStandby === 'Shared') {
    type = 'POWER_LOAD_BALANCING';
  } else if (activeStandby === 'Single') {
    type = '';
  } else {
    type = 'POWER_NOT_DETECTED';
    tagType.value = 'info';
  }
  return type;
}

if (absent) {
  powerState.value = 'POWER_NOT_DETECTED';
  tagType.value = 'info';
} else {
  powerState.value = getPowerType(infoData.Mode);
}

const showList: any = reactive([]);

// 加工数据展示字段
function init() {
  showList.push({
    label: traduction('POWER_SLOT'),
    value: infoData?.Name?.replace('PSU', '') || '--',
  });
  showList.push({
    label: traduction('COMMON_MANUFACTURER'),
    value: infoData.Manufacturer || '--',
  });
  showList.push({
    label: traduction('COMMON_TYPE'),
    value: infoData.Model || '--',
  });
  showList.push({
    label: traduction('COMMON_SERIALNUMBER'),
    value: infoData.SerialNumber || '--',
  });
  showList.push({
    label: traduction('COMMON_FIXED_VERSION'),
    value: infoData.FirmwareVersion || '--',
  });
  showList.push({
    label: traduction('OTHER_PART_NUMBER'),
    value: infoData.PartNumber || '--',
  });
  showList.push({
    label: traduction('INFO_WARRANTY_MANUFACTURE_DATE'),
    value: infoData.ManufactureDate || '--',
  });
  const { PowerCapacityWatts, LineInputVoltage, OutputVoltage } = infoData;
  if (multihost.value) {
    showList.push({
      label: traduction('POWER_CAPACITY_WATTS'),
      value: PowerCapacityWatts ? `${PowerCapacityWatts} W` : '--',
    });
  } else {
    showList.push({
      label: traduction('POWER_CAPACITY_WATTS'),
      value: PowerCapacityWatts || PowerCapacityWatts === 0 ? `${PowerCapacityWatts} W` : '--',
    });
  }
  
  showList.push({
    label: traduction('POWER_SUPPLY_TYPE'),
    value: infoData.PowerSupplyType || '--',
  });
  showList.push({
    label: traduction('POWER_LINE_INPUT_VOLTAGE'),
    value: LineInputVoltage || LineInputVoltage === 0 ? `${LineInputVoltage} V` : '--',
  });
  showList.push({
    label: traduction('POWER_OUTPUT_VOLTAGE'),
    value: OutputVoltage || OutputVoltage === 0 ? `${OutputVoltage} V` : '--',
  });
  if (infoData.Capacitor) {
    showList.push({
      label: traduction('POWER_CAPACITOR_HARDWARE_VERSION'),
      value: infoData.Capacitor.HardwareVersion ?? '--',
    });
  }
}

onMounted(() => {
  init();
});
</script>

<template>
  <div :id="'powerInfo' + data.id" class="card-box">
    <div class="title">
      <div class="title-left">
        <div class="power-name">{{ infoData?.Name }}</div>
        <el-tooltip :content="$t(powerState)" trigger-keys placement="top">
          <el-tag v-if="powerState !== '' && support" :type="tagType" class="power-state">
            {{ $t(powerState) }}
          </el-tag>
        </el-tooltip>
      </div>
      <div class="title-right">
        <div class="power-com">
          <div v-addTooltip.perLine class="power-current">
            {{ $t('POWER_CURRENT') }}
          </div>
          <div class="power-unit">W</div>
        </div>
        <el-tooltip v-if="!multihost" :content="infoData?.InputWatts || infoData?.InputWatts === 0 ? infoData?.InputWatts : '--'" trigger-keys>
          <div class="power-num">
            {{ infoData?.InputWatts || infoData?.InputWatts === 0 ? infoData?.InputWatts : '--' }}
          </div>
        </el-tooltip>
        <el-tooltip v-else :content="infoData?.InputWatts ? infoData?.InputWatts : '--'" trigger-keys>
          <div class="power-num">
            {{ infoData?.InputWatts ? infoData?.InputWatts : '--' }}
          </div>
        </el-tooltip>
      </div>
    </div>
    <div class="content">
      <DataList :id="'powerDataList' + data.id" :columns-num="1" :data-list="showList" />
    </div>
  </div>
</template>

<style lang="scss" scoped>
.card-box {
  background: var(--o-bg-color-light);
  border-radius: var(--o-border-radius);
  min-height: 424px;
  width: calc(25% - 16px);
  min-width: 300px;
  .title {
    height: 72px;
    padding: 16px 24px;
    border-bottom: solid 1px var(--o-border-color-light);
    display: flex;
    align-items: center;
    justify-content: space-between;
    .title-left {
      display: flex;
      align-items: center;
      .power-name {
        font-size: 16px;
        font-weight: 800;
        width: 42px;
        height: 24px;
        line-height: 24px;
        margin-right: 8px;
      }
      .el-tag {
        height: 16px;
        width: 64px;
        padding: 0;
        font-weight: 600;
      }
    }
    .title-right {
      display: flex;
      align-items: center;
      height: 100%;
      .power-com {
        color: var(--o-text-color-secondary);
        font-size: 12px;
        display: flex;
        flex-direction: column;
        height: 40px;
        line-height: 40px;
        justify-content: center;
        align-items: flex-end;
        .power-current {
          height: 16px;
          line-height: 16px;
          max-width: 86px;
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
        }
        .power-unit {
          height: 16px;
          line-height: 16px;
        }
      }
      .power-num {
        height: 40px;
        width: auto;
        max-width: 100px;
        line-height: 40px;
        font-size: 32px;
        font-weight: 500;
        margin-left: 8px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
    }
  }
  .content {
    padding: 24px;
    min-height: 352px;
    .cont-list {
      height: 100%;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      font-size: 12px;
      .name {
        display: inline-block;
        width: 48px;
        color: var(--o-text-color-secondary);
        margin-right: 24px;
      }
    }
  }
  .power-state {
    max-width: 56px !important;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}
</style>
